<template>
    <div>
        <div style="display: inline-block;float: left;margin-top:15px">
            <el-tag
                    type="info"
                    :key="tag.path"
                    v-for="tag in tagList"
                    closable
                    effect="light"
                    @click="clickTag(tag)"
                    :disable-transitions="false"
                    @close="handleClose(tag)">
                {{tag.cnName}}
            </el-tag>
        </div>
        <div style="display: inline-block;float: right;height: 60px;width:200px">
            <div style="display:inline-block;width: 60px;height:60px;" class="myImg">
                <el-avatar fit="fill" :size="40" :src="imgSrc"></el-avatar>
<!--                <img  :src="imgSrc"></img>-->
            </div>
            <div style="float:right;display:inline-block;width:140px;height:60px;argin-top:0px;vertical-align: center;line-height: 60px">
                    <el-dropdown
                            @command="clickDrop"
                    >
                      <span style="color: white">
                        {{userName}}<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="update">更改信息</el-dropdown-item>
                            <el-dropdown-item command="quit">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import MldUpdate from '@/views/sys/register/update'
    import {getUserInfo}from '@/api/userAPI'
    export default {
        data(){
            return {
                breadList: [],
                imgSrc:'http://localhost:8083/img/',
                userName:''
            }
        },
        computed:{
            ...mapState(['tagList'])
        },
        watch: {
            $route(val) {
                if(val.path=='/index'){
                    return;
                }
                // 调用获取路由数组方法
                this.getBreadList(val);
            }
        },
        methods: {
            clickDrop(val){
                if(val==='person'){
                    this.getPerson()
                }else if(val==='update'){
                    this.update();
                }else{
                    this.quit()
                }

            },
            getPerson(){

            },
            update(){
                    this.$msgBox.showDialog({
                        title: '更改信息',
                        top:'5vh',
                        content: MldUpdate,
                        width: '50%',
                        parent: this,
                        textCancel:"取消",
                    })
            },
            quit(){
                localStorage.removeItem("token")
                localStorage.clear()
                this.$router.push({
                    path:'/login'
                })
            },
            clickTag(val){
                this.$router.push({path:val.path})
            },
            handleClose(val){
                if(val.path!=='/index'){
                    this.tagList.splice(this.tagList.indexOf(val), 1)
                }
            },
            isHome(route) { //拿到首页
                return route.name === "index";
            },

            /**
             * @description 获取路由数组
             * @params val 路由参数
             * @author tw
             */
            getBreadList(val) {
                if (val.matched) {
                    let matched = val.matched.filter(item => item.meta && item.meta.title);
                    matched[0].path = '/'
                    this.breadList = matched
                }
            },
            initData(){
                this.imgSrc='http://localhost:8083/img/'
                const userInfo=JSON.parse(localStorage.getItem("userInfo"))
                this.imgSrc+=userInfo.img
                this.userName=userInfo.username
            }
        },
        created() {
            this.initData()
            this.$bus.$on('changeInfo',(data)=>{
                this.imgSrc='http://localhost:8083/img/'
                this.imgSrc+=data.img
                this.userName=data.username
            })
        },

    }
</script>

<style scoped>
    .el-tag + .el-tag {
        margin-left: 10px;
    }
    .el-tag:nth-child(1){
        margin-left: 20px;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
    .myImg{
        padding: 10px;
        box-sizing: border-box;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>
